<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.slim.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/jquery.min.js"></script>
</head>
<style>
    .bd-example{
        margin-top: 50px;
    }
    .bd-example .carousel-item {
        max-height: 500px;
    }
    .bd-example .btn:focus,.btn.focus {
        box-shadow: none;
        background-color: #007bff;
        border: 1px solid transparent;
    }
    
    .skyblue{
        font-size: 40px;
        font-weight: lighter;
        color: #2d92ff;
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">综述 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">简述</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            特点
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Chrome</a>
                            <a class="dropdown-item" href="#">Firefox</a>
                            <a class="dropdown-item" href="#">Safari</a>
                            <a class="dropdown-item" href="#">OPera</a>
                            <a class="dropdown-item" href="#">IE</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <!-- <a class="nav-link" href="#">关于</a> -->
                        <button type="button" class="btn nav-link" data-toggle="modal"
                            data-target="#exampleModalCenter">
                            关于
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 弹出框 -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">关于</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web
                    开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
                    News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 轮播图 -->
    <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/chrome-big.jpg" class="d-block w-100 " alt="...">
                    <div class="carousel-caption">
                        <h5>Chrome</h5>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                        <button type="button" class="btn btn-primary down">点我下载</button>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/firefox-big.jpg" class="d-block w-100 " alt="...">
                    <div class="carousel-caption">
                        <h5>Firefox</h5>
                        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
                        <button type="button" class="btn btn-primary down">点我下载</button>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/safari-big.jpg" class="d-block w-100 " alt="...">
                    <div class="carousel-caption">
                        <h5>Safari</h5>
                        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
                        <button type="button" class="btn btn-primary down">点我下载</button>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/opera-big.jpg" class="d-block w-100 " alt="...">
                    <div class="carousel-caption">
                        <h5>Opera</h5>
                        <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
                        <button type="button" class="btn btn-primary down">点我下载</button>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/ie-big.jpg" class="d-block w-100 " alt="...">
                    <div class="carousel-caption">
                        <h5>IE</h5>
                        <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
                        <button type="button" class="btn btn-primary down">点我下载</button>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>


    <div class="container">
        <!-- 浏览器展示 -->
        <div class="row mb-5 mt-5">
            <div class="col-md-4 d-flex align-items-center flex-column">
                <img src="images/chrome-logo-small.jpg" alt="">
                <h2>Chrome</h2>
                <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                <button type="button" class="btn btn-outline-dark">点我下载</button>
            </div>
            <div class="col-md-4 d-flex align-items-center flex-column">
                <img src="images/firefox-logo-small.jpg" alt="">
                <h2>Firefox</h2>
                <p class="text-center">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
                <button type="button" class="btn btn-outline-dark">点我下载</button>
            </div>
            <div class="col-md-4 d-flex align-items-center flex-column">
                <img src="images/safari-logo-small.jpg" alt="">
                <h2>Safari</h2>
                <p class="text-center">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
                <button type="button" class="btn btn-outline-dark">点我下载</button>
            </div>
        </div>
        <hr class="">

        <!-- 浏览器选项卡 -->
        <ul class="nav nav-tabs mt-5" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="Chrome-tab" data-toggle="tab" href="#Chrome" role="tab" aria-controls="Chrome"
                    aria-selected="true">Chrome</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="Firefox-tab" data-toggle="tab" href="#Firefox" role="tab"
                    aria-controls="Firefox" aria-selected="false">Firefox</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="Safari-tab" data-toggle="tab" href="#Safari" role="tab"
                    aria-controls="Safari" aria-selected="false">Safari</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="Opera-tab" data-toggle="tab" href="#Opera" role="tab"
                    aria-controls="Opera" aria-selected="false">Opera</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="IE-tab" data-toggle="tab" href="#IE" role="tab"
                    aria-controls="IE" aria-selected="false">IE</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="Chrome" role="tabpanel" aria-labelledby="Chrome-tab">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <p class="skyblue">
                            Google Chrome
                            <small class="text-muted">使用最广的浏览器</small>
                        </p>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
                    </div>
                    <div class="col-md-6">
                        <img src="images/chrome-logo.jpg" alt="" class="w-100">
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="Firefox" role="tabpanel" aria-labelledby="Firefox-tab">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <img src="images/firefox-logo.jpg" alt="" class="w-100">
                    </div>
                    <div class="col-md-6">
                        <p class="skyblue">
                            Mozilla Firefox
                            <small class="text-muted">美丽的狐狸</small>
                        </p>
                        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
                    </div>
                    
                </div>
            </div>
            <div class="tab-pane fade" id="Safari" role="tabpanel" aria-labelledby="Safari-tab">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <p class="skyblue">
                            Safari
                            <small class="text-muted">Mac用户首选</small>
                        </p>
                        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
                    </div>
                    <div class="col-md-6">
                        <img src="images/safari-logo.jpg" alt="" class="w-100">
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="Opera" role="tabpanel" aria-labelledby="Opera-tab">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <img src="images/opera-logo.jpg" alt="" class="w-100">
                    </div>
                    <div class="col-md-6">
                        <p class="skyblue">
                            Opera
                            <small class="text-muted">小众但易用</small>
                        </p>
                        <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
                    </div>
                    
                </div>
            </div>
            <div class="tab-pane fade" id="IE" role="tabpanel" aria-labelledby="IE-tab">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <p class="skyblue">
                            IE
                            <small class="text-muted">你懂的</small>
                        </p>
                        <p>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
                    </div>
                    <div class="col-md-6">
                        <img src="images/ie-logo.jpg" alt="" class="w-100">
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <p class="float-left">@ 2020 H5</p>
        <a href="javascript:;" class="float-right goTop">回到顶部</a>
    </div>


</body>
    <script>
        //返回顶部事件
        $(".goTop").click(function(){
            $('body,html').animate({
                scrollTop : 0
            });
        });
        //轮播图点击跳转下载页面事件
        var down_url = ['https://www.google.cn/intl/zh-CN/chrome/','https://www.firefox.com.cn/download/','https://support.apple.com/zh_CN/downloads/safari','https://www.opera.com/zh-cn/download','https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads'];
        $('.carousel-item button').click(function(){
            location.assign(down_url[$(this).parents('.carousel-item').index()]);
        })
    </script>
</html>